<template>
  <div
    class="flex h-[100vh] w-full flex-col"
    style="padding: 50px 200px 50px 150px"
  >
    <vs-tabs alignment="left">
      <vs-tab label="Chat设置">
        <div>
          <aside class="flex">
            <div
              class="relative h-screen w-full overflow-y-auto border-l border-slate-300 bg-slate-50 py-8 dark:border-slate-700 dark:bg-slate-900"
            >
              <!-- Select -->
              <div class="px-2 text-slate-800 dark:text-slate-200">
                <label for="select-mode" class="px-2 text-sm font-medium"
                  >Mode</label
                >
                <select
                  name="select-mode"
                  id="select-mode"
                  class="mt-2 w-full cursor-pointer rounded-lg border-r-4 border-transparent bg-slate-200 py-3 pl-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-600 dark:bg-slate-800"
                >
                  <option value="">Select a mode</option>
                  <option value="Complete">Complete</option>
                  <option value="Chat">Chat</option>
                  <option value="Insert">Insert</option>
                  <option value="Edit">Edit</option>
                </select>
              </div>
              <!-- Toggle -->
              <div class="px-2 py-4">
                <label class="relative flex cursor-pointer items-center">
                  <input type="checkbox" value="" class="peer sr-only" />
                  <div
                    class="peer h-6 w-11 rounded-full bg-slate-200 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-slate-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-300 dark:border-slate-600 dark:bg-slate-700 dark:peer-focus:ring-blue-800"
                  ></div>
                  <span
                    class="ml-3 text-sm font-medium text-slate-800 dark:text-slate-200"
                    >Toggle</span
                  >
                </label>
              </div>
              <!-- More Settings -->
              <div
                class="my-4 border-t border-slate-300 px-2 py-4 text-slate-800 dark:border-slate-700 dark:text-slate-200"
              >
                <label
                  class="px-2 text-xs uppercase text-slate-500 dark:text-slate-400"
                  >Advanced</label
                >

                <label
                  for="api-key"
                  class="mb-2 mt-4 block px-2 text-sm font-medium"
                  >API Key</label
                >
                <input
                  type="password"
                  id="api-key"
                  class="block w-full rounded-lg bg-slate-200 p-2.5 text-xs focus:outline-none focus:ring-2 focus:ring-blue-600 dark:bg-slate-800 dark:placeholder-slate-400 dark:focus:ring-blue-600"
                  placeholder="4sNhFQ******ffyt"
                />

                <label
                  for="base-url"
                  class="mb-2 mt-4 block px-2 text-sm font-medium"
                  >Base URL</label
                >
                <input
                  type="url"
                  id="base-url"
                  class="block w-full rounded-lg bg-slate-200 p-2.5 text-xs focus:outline-none focus:ring-2 focus:ring-blue-600 dark:bg-slate-800 dark:placeholder-slate-400 dark:focus:ring-blue-600"
                  placeholder="https://api.openai.com"
                />

                <label
                  for="select-model"
                  class="mb-2 mt-4 block px-2 text-sm font-medium"
                  >Model</label
                >
                <select
                  name="select-model"
                  id="select-model"
                  class="block w-full cursor-pointer rounded-lg border-r-4 border-transparent bg-slate-200 py-3 pl-1 text-xs focus:outline-none focus:ring-2 focus:ring-blue-600 dark:bg-slate-800 dark:placeholder-slate-400 dark:focus:ring-blue-600"
                >
                  <option value="gpt-3.5-turbo">gpt-3.5-turbo</option>
                  <option value="gpt-4">gpt-4</option>
                  <option value="gpt-4-0314">gpt-4-0314</option>
                  <option value="gpt-4-32k">gpt-4-32k</option>
                  <option value="gpt-4-32k-0314">gpt-4-32k-0314</option>
                  <option value="gpt-3.5-turbo-0301">gpt-3.5-turbo-0301</option>
                </select>

                <label
                  for="max-tokens"
                  class="mb-2 mt-4 block px-2 text-sm font-medium"
                  >Max tokens</label
                >
                <input
                  type="number"
                  id="max-tokens"
                  class="block w-full rounded-lg bg-slate-200 p-2.5 text-xs focus:outline-none focus:ring-2 focus:ring-blue-600 dark:bg-slate-800 dark:placeholder-slate-400 dark:focus:ring-blue-600"
                  placeholder="2048"
                />

                <label
                  for="max-tokens"
                  class="mb-2 mt-4 block px-2 text-sm font-medium"
                  >Temperature</label
                >
                <input
                  type="number"
                  id="max-tokens"
                  class="block w-full rounded-lg bg-slate-200 p-2.5 text-xs focus:outline-none focus:ring-2 focus:ring-blue-600 dark:bg-slate-800 dark:placeholder-slate-400 dark:focus:ring-blue-600"
                  placeholder="0.7"
                />

                <label
                  for="top-p"
                  class="mb-2 mt-4 block px-2 text-sm font-medium"
                  >Top P</label
                >
                <input
                  type="number"
                  id="top-p"
                  class="block w-full rounded-lg bg-slate-200 p-2.5 text-xs focus:outline-none focus:ring-2 focus:ring-blue-600 dark:bg-slate-800 dark:placeholder-slate-400 dark:focus:ring-blue-600"
                  placeholder="1"
                />

                <button
                  type="button"
                  class="mt-4 block w-full rounded-lg bg-slate-200 p-2.5 text-xs font-semibold hover:bg-blue-600 hover:text-slate-200 focus:outline-none focus:ring-2 focus:ring-blue-600 dark:bg-slate-800 dark:hover:bg-blue-600"
                >
                  Save changes
                </button>
              </div>
            </div>
          </aside>
        </div>
      </vs-tab>
    </vs-tabs>
  </div>
</template>
